<template>
  <div id="pieCharts" ref="chart" class="pieCharts" />
</template>
<script>
export default {
  name: 'PieCharts',
  props: {
    data: {
      type: Array,
      default: () => {}
    },
    unit: {
      type: String,
      default: '家'
    },
    title: {
      type: String,
      default: ''
    },
    lengendTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      echartData: [],
      total: 0
    }
  },
  watch: {
    data: {
      handler(newValue) {
        console.log(newValue)
        if (newValue && newValue.length) {
          this.echartData = newValue
          this.total = newValue.reduce((prev, cur, index, arr) => {
            return prev + cur.value
          }, 0)
          this.getEcharts()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    getEcharts() {
      const echarts = this.echartData
      // 接下来的使用就跟之前一样，初始化图表，设置配置项
      const myChart = this.$echarts.init(this.$refs.chart)
      myChart.setOption({
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: '{b}:({d}%)'
        },
        legend: [
          {
            top: 'center',
            orient: 'vertical',
            left: '50%',
            itemWidth: 4,
            itemHeight: 20,
            icon: 'rect',
            itemGap: 20,
            textStyle: {
              color: '#4E5969',
              fontSize: 14,
              padding: [0, 0, 0, 10],
              rich: {
                'title': {
                  'color': 'inherit',
                  'fontSize': 13,
                  'width': 130,
                  'fontWeight': 'bold'
                },
                'num': {
                  'fontSize': 13,
                  'width': 80,
                  'fontWeight': 'bold',
                  'color': '#ff9e40'
                },
                'value': {
                  'fontSize': 13,
                  'width': 100,
                  'fontWeight': 'bold',
                  'color': '#ff9e40'
                }
              }
            },
            data: this.echartData.length && this.echartData.map(item => item.name) || [],
            formatter: (name) => {
              const target = echarts.find(function(item) {
                return item.name === name
              })
              const percentage = ((target && target.value) || 0) / this.total * 100
              return (
                '{title|' +
                name +
                '}{num|' +
                  ((target && target.value) || 0) +
                `${this.lengendTitle}}{value|` +
                percentage.toFixed(2) +
                '%}'
              )
            }
          }
        ],
        grid: {
          containLabel: true
        },
        title: {
          text: `{a| 共计(${this.unit})}`,
          left: this.unit === '项' ? '20%' : '19%',
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                color: '#656C74',
                // padding: [0, 0, 0, 10]
              }
            }
          },
          subtext: `{a|${this.title}}`,
          subtextStyle: {
            align: 'center',
            rich: {
              a: {
                fontSize: 18,
                color: '#1D2129',
                fontWeight: 'bold',
                align: 'center',
                padding: [0, 0, 0, 12]
              }
            }
          },
          x: '17%',
          y: '43%'
        },
        series: [
          {
            type: 'pie',
            radius: ['46%', '60%'],
            center: ['26%', '50%'],
            color: [
              '#4D94FF',
              '#21D9C6',
              '#FF9F40',
              '#FFCC00',
              '#8173FF'
            ],
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: '#fff'
              }
            },
            data: this.echartData
          }
        ]
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
  .pieCharts{
    width: 100%;
    height: 300px;
  }
  </style>
